<template>
  <div id="app">
    <router-view />
    <theme-picker />



    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-press-escape="false" :show-close="true" :close-on-click-modal="false" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="form.code" placeholder="请输入验证码" style="width:150px;margin-right:10px;" />
            <el-button type="primary" size="mini" @click="getCode" :loading="getCodeLoading">{{getCodeText}}</el-button>
          </el-form-item>
          <el-form-item label="所属" prop="belong">
            <el-input v-model="form.belong" placeholder="请填写公司或个人" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm" :loading="submitFormLoading">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import { getSmsCode, joinUs, checkJoinUs } from "@/api/ai/external_user";

export default {
  name: "App",
  components: { ThemePicker },
  data(){
    return {
      open:false,
      title: '加入我们',
      getCodeText:"获取验证码",
      getCodeLoading:false,
      submitFormLoading:false,
      rules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: "手机号格式错误", trigger: "blur" }
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ],
        belong: [
          { required: true, message: "所属不能为空", trigger:"blur" }
        ]
      },
      form: {
          mobile: '',
          code: '',
          belong: ''
      },
      initGetCodeTime: 180,
      time: 0,
    }
  },
  created(){
    if(localStorage.getItem('joinUs_token')){
      this.open = false
    }else{
      checkJoinUs().then(response=>{
        if(response.msg == 200){
          this.open = false
          localStorage.setItem('joinUs_token',1)
        }else{
          this.open = true
        }
      })
    }
  },
  methods:{
    submitForm() {
      this.rules = {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: "手机号格式错误", trigger: "blur" }
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ],
        belong: [
          { required: true, message: "所属不能为空", trigger:"blur" }
        ]
      }

      this.$nextTick(() => {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.submitFormLoading = true
            joinUs(this.form).then(response=>{
              this.open = false;
              this.submitFormLoading = false
              this.$modal.msgSuccess(response.msg)
              localStorage.setItem('joinUs_token',1)
            }).catch(error=>{
              this.submitFormLoading = false
            })
          }
        });
      })
    },
    cancel() {
      this.open = false;
    },
    getCode() {
      if(this.time>0){
        this.$modal.msgError('不能重新发送请求')
        return false
      }

      this.rules = {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: "手机号格式错误", trigger: "blur" }
        ],
      }

      this.$nextTick(() => {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.getCodeLoading = true
            getSmsCode({mobile: this.form.mobile}).then(response=>{
              this.getCodeLoading = false
              this.$modal.msgSuccess(response.msg)
              this.time = this.initGetCodeTime;
              let timeInterval = setInterval(() => {
                this.time--
                if (this.time === 0) {
                  clearInterval(timeInterval)
                  this.getCodeText = '重新获取验证码'
                }else{
                  this.getCodeText = `${this.time}秒后重新获取`
                }
              }, 1000)
            }).catch(error=>{
              this.getCodeLoading = false
            })
          }
        });
      });

      

      
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
